<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            width: 100px;
            height: 100px;
            position: fixed;
            left: 100px;
            top: 100px;
            border: 5px solid red;
            padding: 20px;
            margin: 10px;
        }
        .demo {
            width: 50px;
            height: 50px;
            position: fixed; 
            left: 50px;
            top: 50px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="demo"></div>
    </div>

    <script>

        var div = document.getElementsByTagName('div')[0];

        console.log(div.getBoundingClientRect());
        // 不管div是不是定位元素，父级有没有定位元素
        //返回一个对象，上右下左 分别代表四个边相对于左上的位置，像素值
        // 宽高 指的是盒子边框盒的宽高
        // x y 代表边框盒的左上顶点的坐标
        // 老版本 IE 不兼容宽高，可以利用剩下的属性计算出来
        // es5的新方法，几乎用不到。。。。。（虽然兼容性好，但是习惯不用它）
        // 返回的结果不是实时的，是当时的静态的写照


        // 下面属性完全取代上面的方法

        // 查看元素尺寸
        console.log(div.offsetWidth); //返回边框盒宽高，像素值，数字类型
        console.log(div.offsetHeight);

        // 查看元素位置
        console.log(div.offsetLeft);
        console.log(div.offsetTop);



        var div1 = document.getElementsByClassName('demo')[0];
        // 父子嵌套的时候，最好不要使用元素名进行选择，顺序不确定

        console.log(div1.getBoundingClientRect());
        console.log(div1.offsetWidth); 
        console.log(div1.offsetHeight);
        console.log(div1.offsetLeft); //若div1不是固定定位， 求的是自身的左、上边距离有定位的父级（设置了position的元素）边框之间的距离
        console.log(div1.offsetTop); // 若div1是固定定位元素，则是相对于文档的距离

    </script>
</body>
</html>